<template>
  <div class="product-detail">
    <el-card class="product-card">
      <el-divider></el-divider>
<!--      <el-row v-if="room">-->
<!--        <el-col :span="12">-->
<!--          <h1>{{ room.roomNumber }}</h1>-->
<!--          <p>Type: {{ room.type }}</p>-->
<!--          <p>Cost: {{ room.cost }}</p>-->
<!--          <p>Cash Pledge: {{ room.cashPledge }}</p>-->
<!--          <p>Building: {{ room.building }}</p>-->
<!--          <p>Description: {{ room.description }}</p>-->
<!--          <p>address: {{ address}}</p>-->
<!--        </el-col>-->
<!--      </el-row>-->

      <el-descriptions :title="`房间号${room.roomNumber}`" v-if="room">
        <el-descriptions-item label="房租/月">{{ room.cost }}</el-descriptions-item>
        <el-descriptions-item label="押金">{{ room.cashPledge }}</el-descriptions-item>
        <el-descriptions-item label="房间详情">{{room.description}}</el-descriptions-item>
        <el-descriptions-item label="Remarks">
          <el-tag size="small">{{room.type}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="Address"
        >{{address}}</el-descriptions-item
        >
      </el-descriptions>
      <div v-else>
        Loading...
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {OpenAPI, RoomManageControllerService} from '../../generated';
import { useRoute } from 'vue-router';

const route = useRoute();
const id = ref(route.query.id);
const room = ref();
const address=ref(route.query.address)
onMounted(() => {
  getRoom();
});

const getRoom = async () => {
  try {
    const response = await RoomManageControllerService.getDetailUsingGet(id.value);
    if (response.code === 200) {
      room.value = response.result;
    } else {
      console.error('Failed to fetch room:', response.message);
    }
  } catch (error) {
    console.error('Error fetching room:', error);
  }
};

const getImageUrl = (imageName) => {
  return `${OpenAPI.BASE}/common/download?name=${imageName}`;
};
</script>

<style scoped>
.product-detail {
  padding: 20px;
}

.product-card {
  width: 80%;
  margin: 0 auto;
}

.product-image {
  width: 100%;
  height: auto;
}
</style>
